import { fetchCartList, fetchMutilUpdateCart, fetchUpdateCart } from '@/api/cart';
import React, { useEffect, useMemo, useState } from 'react';
import styled from './index.module.css';
import { ICartReturn } from '@/views/goods/types';
import { IResponse } from '@/types';
import { useNavigate } from 'react-router-dom';
import CartContainer from './components/cartContainer';
import Footer from './components/footer';

export default function CartList() {
    const [cartList, setCartList] = useState<ICartReturn[]>([]);
    const isDisabled = useMemo(
        () => cartList.every((item) => item.is_select === false),
        [cartList],
    );
    const nav = useNavigate();
    useEffect(() => {
        fetchCartList<ICartReturn[]>().then((res) => {
            setCartList(res);
        });
    }, []);

    //总价
    const totalPrice = useMemo(() => {
        let total = 0;
        cartList.forEach((item) => {
            if (item.is_select) {
                total += (item.good.price || item.good.oldPrice || 0) * item.num;
            }
        });
        return total.toFixed(2);
    }, [cartList]);
    const selectAll = (e: any) => {
        fetchMutilUpdateCart<any, IResponse>(
            cartList.map((item) => {
                return {
                    id: item.id,
                    is_select: e.target.checked,
                };
            }),
        ).then((res) => {
            if (res.statusCode === 200) {
                cartList.forEach((item) => {
                    item.is_select = e.target.checked;
                });
                setCartList([...cartList]);
                return;
            }
        });
    };
    const changeNum = (id: string, value: number) => {
        fetchUpdateCart<any, IResponse>(id, {
            num: value,
        }).then((res) => {
            if (res.statusCode === 200) {
                cartList.forEach((item) => {
                    if (item.id === id) {
                        item.num = value;
                    }
                });
                setCartList([...cartList]);
                return;
            }
        });
    };
    const selectItem = (id: string, checked: boolean) => {
        fetchUpdateCart<any, IResponse>(id, {
            is_select: checked,
        }).then((res) => {
            if (res.statusCode === 200) {
                cartList.forEach((item) => {
                    if (item.id === id) {
                        item.is_select = checked;
                    }
                });
                console.log('chengg');

                setCartList([...cartList]);
                return;
            }
        });
    };
    const settlement = () => {
        const cartIds: string[] = [];
        cartList.forEach((item) => {
            if (item.is_select) {
                cartIds.push(item.id);
            }
        });
        if (cartIds.length === 0) {
            return;
        }
        nav('/settlement');
    };
    return (
        <div className={styled.cartList}>
            <CartContainer
                selectAll={selectAll}
                changeNum={changeNum}
                selectItem={selectItem}
                cartList={cartList}
            ></CartContainer>
            <Footer
                totalPrice={Number(totalPrice)}
                title="Settle Accounts"
                settlement={settlement}
                isDisabled={isDisabled}
            ></Footer>
        </div>
    );
}
